<template>
    <div class="main" @click='refresh'>
        <img :src="roomMsg.room_src" alt="">
        <div class='room-detial'>
            <p calss='room-name'>{{roomMsg.room_name}}</p>
            <p><span class='fa fa-user'></span> {{roomMsg.nickname}}</p>
            <p><span class='fa fa-eye'></span> {{roomMsg.online|numFormat}}</p>
        </div>
    </div>
</template>
<script>
    export default{
        props:['roomMsg'],
        methods:{
            refresh(){
                window.open(this.roomMsg.url)
            }
        }
    }
</script>
<style scoped>
    .main{
        width: 100%;
        height: 10rem;
        border-bottom: 1px solid #666666;
        background-color: #fff;
    }
    img{
        height: 9rem;
        padding: 10px;
        float: left;
    }
    .room-detial{
        position: relative;
        top: 2rem;
        color:#666666;
    }
    .room-detial p:nth-of-type(1){
        font-weight: bold;
        color: black;
        font-size: 1rem;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    } 
</style>